<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:first-child {
            background-color: rgb(235, 188, 102);
            color: rgb(0, 252, 97);
        }

        ul li:last-child {
            background-color: #eb5b5b;
            color: darkorange;
        }


        /* nth-child(n)括号里面的n可以是数字，关键字 ，公式 */


        /* 1、选择第三个，nth-child(n)*/

        ul li:nth-child(3) {
            background-color: #4ce625;
        }

        /* 2、关键字，even表示偶数,odd表示选出所有奇数 */

        ul li:nth-child(even) {
            background-color: #797777;
        }

        /* 3、公式，nth-child(n)， 从0开始，往后计算，
        里面只能跟n，不能是其他字母，2n+1,  2n, 5n（5的倍数）, -n+5(前5个，包含第5个) */

        ol li:nth-child(2n+1) {
            background-color: #f18484;
        }

        ol li:nth-child(-n+5) {
            background-color: #84f184;
        }
    </style>
</head>

<body>n
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>

    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>
</body>

</html>